<div class="table-margin">
  <div class="table-header">
    <table class="table table-bordered table-header tableStyle">
      <thead>
        <tr>
          <td class="w5 text-center">
            <input type="checkbox" 
                   #event 
                   (click)="selectAll(event.checked, tabVal)" 
                   [checked]="isSelectAll"
                   >
          </td>
          <td class="w10 text-center">序号</td>
          <td class="w10 text-center">功能名称</td>
          <td class="w10 text-center">功能编码</td>
          <td class="w20 text-center">功能类型</td>
          <td class="w20 text-center">英文名</td>
          <td class="w10 text-center">启用/禁用</td>
          <td class="w10 text-left">操作</td>
        </tr>
      </thead>
    </table>
  </div>
  <div class="table-body">
    <table class="table table-bordered table-header table-striped">

      <tbody>
        <tr *ngFor="let val of tabVal; let  i = index;" [ngClass]="{'active':i%2!=0}">
          <td class="w5 text-center">
            <input type="checkbox" 
                   #event 
                   (click)="chose(event.checked, val.functionId, val.length)" 
                   [checked]="isChose"
                   >
          </td>
          <td class="w10 text-center">{{ tableNumber+i+1 }}</td>
          <td class="w10 text-center max-w">{{ val?.functionName }}</td>
          <td class="w10 text-center max-w">{{ val?.functionCode }}</td>
          <td class="w20 text-center">
            <span *ngIf="val?.functionType==0">功能点</span>
            <span *ngIf="val?.functionType==1">功能页</span>
          </td>
          <td class="w20 text-center max-w">{{ val?.functionEName }}</td>
          <td class="w10 text-center">
            <strong class="text-success" *ngIf="val?.enable==1">启用</strong>
            <strong class="text-danger" *ngIf="val?.enable==0">禁用</strong>
          </td>
          <td class="w10 text-center icon-td">
            <span class="btn-i" 
                  title="详情" 
                  (click)="detailsPopup(val)" 
                  *ngIf="right['effect']['details']"
                  >
              <img width="14px" height="10px" src="assets/right-product/view.png">
            </span>
            <span class="btn-i" 
                  title="修改"  
                  data-toggle="modal" 
                  data-target="#update" 
                  (click)="editPopup(val)" 
                  *ngIf="right['effect']['update']"
                  >
              <img width="14px" height="14px" src="assets/right-product/edit.png">
            </span>
            
            <span class="btn-i" 
                  title="权限分配" 
                  (click)="permissionPopup(val)"
                  *ngIf="right['effect']['permissionsAllocation']"
                  >
              <img width="14px" height="14px" src="assets/right-product/Jurisdiction.png">
            </span>
          </td>
        </tr>

      </tbody>

    </table>
  </div>
</div>